<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Texas Holdem - Pinyi</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <!-- <header>
        <h1 class="title">TEXAS HOLDEM</h1>
    </header> -->

    <main>
      <div id="gameboard">
        <div class="gamemsg hidden">
          <div id="gamemsgcon">Player Win</div>
        </div>

        <div id="totalbet">
          <h2>Total Bet: <span id="betnum">$ 0</span></h2>
        </div>

        <div id="dealer">
          <div class="dealercards" id="dealercard0"></div>
          <div class="dealercards" id="dealercard1"></div>
          <div class="dealercards" id="dealercard2"></div>
          <div class="dealercards" id="dealercard3"></div>
          <div class="dealercards" id="dealercard4"></div>
        </div>

        <div class="player" id="player0">
          Player 0
          <div class="msg msgright">p0 msg</div>
          <div class="playercards" id="p0cards"></div>

          <div class="playerfund" id="p0fund">$ 0</div>
        </div>

        <div class="player" id="player1">
          <div class="msg msgright">p1 msg</div>
          Player 1
          <div class="playercards" id="p1cards"></div>

          <div class="playerfund" id="p1fund">$ 0</div>
        </div>

        <div class="player" id="player2">
          Gamer
          <div class="msg msggamer">gamer msg</div>
          <div class="playercards" id="p2cards"></div>

          <div class="playerfund" id="p2fund">$ 0</div>
        </div>

        <div class="player" id="player3">
          Player 3
          <div class="msg msgleft">p3 msg</div>
          <div class="playercards" id="p3cards"></div>

          <div class="playerfund" id="p3fund">$ 0</div>
        </div>

        <div class="player" id="player4">
          Player 4
          <div class="msg msgleft">p4 msg</div>
          <div class="playercards" id="p4cards"></div>

          <div class="playerfund" id="p4fund">$ 0</div>
        </div>

        <div class="ctlbuttons">
          <div id="startctldiv">
            <button id="startbtn">START</button>
          </div>

          <div id="betctldiv" class="hidden">
            <div class="scalediv hidden">
              <div id="scalevalue">Value: 0</div>
              <input
                type="range"
                min="1"
                max="100"
                value="50"
                class="slider"
                id="myRange"
              />
            </div>
            <div>
              <button id="foldbtn">FOLD</button>
              <button id="callbtn">CHECK</button>
              <button id="showscale">RAISE</button>
              <button id="raisebtn" class="hidden">RAISE</button>
            </div>
          </div>

          <div id="resetctldiv" class="hidden">
            <button id="continuebtn">CONTINUE</button>
            <!-- <button id="endbtn">END GAME</button> -->
            <button id="endbtn">New Game</button>
          </div>
        </div>
      </div>
    </main>

    <!-- <footer></footer> -->

    <script src="js/poker.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
